<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="路由名称">
              <el-select clearable @change="getUserList" v-model="formInline.clusterName" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clusterName"
                :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser"><Icon type="md-add" />创建路由</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb
        ref="httbRef"
        :btn-is-show="btnIsShow"
        :table-col="tabUserList"
        :table-data="tableUserData"
        width="250"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData"
        @refresh="getUserList"
        @sendData ="sendData"
      />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm autoClass">
            <el-form-item label="路由名称" prop="routingName">
                <el-input v-model="ruleForm['routingName']" :disabled="disFlag" clearable placeholder="" />
            </el-form-item>
            <el-form-item label="集群id" prop="id">
              <el-select clearable  :disabled="disFlag" v-model="ruleForm['id']" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clusterName"
                :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <div v-if="!disFlag" style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>


      <el-dialog :close-on-click-modal="false" :title="title2" width="50%" :visible.sync="dialogTableVisible2">
        <addthemeadm :options="options" :data-info="dataInfo" ref="addthemeadm"  v-if="sendFlag&&dialogTableVisible2" />
        <sendadm :options="options" v-if="!sendFlag&&dialogTableVisible2" :data-info="dataInfo" />
      </el-dialog>

    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  import { validateIP } from '@/utils/validate'
  import addthemeadm from './addThemeadm2.vue'
  import sendadm from './sendadm2.vue'
  export default {
    components: { addthemeadm, sendadm},
    data() {
      return {
        addthemeadmInfo:null,
        title2:"",
        dialogTableVisible2:false,
        options:[],
        disFlag:false,
        sendFlag: false,
        dataInfo: null,
        btnIsShow: {
            operate: true,
            getData:true,
            monitor:false,
            update: false,
            detile: true,
            del: false
        },
        title: '新增',
        rules: {
          host: [
              { validator: validateIP, trigger: 'change' }
            ],
        },
        dialogTableVisible: false,
        ruleForm: {
          "routingName": "",
          "id": ""
        },
        userId: '',
        formInline: {
          'clusterName': ''
        },
        tableUserData: [],
        tabUserList: [
        {
            key: 'routingName',
            title: '路由'
          },
          {
            key: 'messagenNumber',
            title: '堆积数量'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
        
    },
    mounted() {
      this.$nextTick(() => {
        // this.getUserList()
        request({
            url: '/ht-datacenter/rabbit/getRabbitMqList',
            method: 'post',
            data:{
                "page":1,
                "limit":1000
            }
          }).then(res => {
            if (res.code == 200) {
              this.options = res.data.records
              this.formInline.clusterName = this.options[0].id
              this.getUserList()
            } else {}
          })
      })
    },
    methods: { 
        sendData(v){
            this.dataInfo = v
            this.sendFlag = false
            this.dataInfo.id = this.formInline.clusterName
            this.dialogTableVisible2 = true
            this.title2 = '发送示例'
        },
        addUser(v) {
            this.title = '新增'
            this.disFlag = false
            this.dialogTableVisible = true
            this.resetForm(1)
        },
        getDataDetileInfo(v){
            this.title = ' '
            this.disFlag = true
            this.dialogTableVisible = true
            this.ruleForm = JSON.parse(v)
            this.ruleForm.id = this.formInline.clusterName
        },
        editRowData(v){
            this.title = '修改'
            this.disFlag = false
            this.dialogTableVisible = true
            this.ruleForm = JSON.parse(v)
        },
        resetForm(v) {
            if(!v||v!=1){
            this.dialogTableVisible = false
            }
            const keys = Object.keys(this.ruleForm)
            const o = {}
            keys.forEach((item, index) => {
            const v = this.ruleForm[item]
            if (typeof (v) === 'string') {
                o[item] = ''
            } else if (typeof (v) === 'number') {
                o[item] = ''
            } else if (typeof (v) === 'object') {
                if (v instanceof Array) {
                o[item] = []
                } else{
                o[item] = {}
                }
            }
            })
            this.ruleForm = JSON.parse(JSON.stringify(o))
        },
        showGetData(v){
            this.getDataFun(v)
        },
        getDataFun(data) {
            this.dataInfo = data
            this.dataInfo.id = this.formInline.clusterName
            this.title2 = '获取数据'
            this.sendFlag = true
            this.dialogTableVisible2 = true
        },
        deleteSelectData(v) {
            request({
                url: '/ht-datacenter/rabbit/removeRabbitMqById?id='+v.id,
                method: 'post',
                data:{}
            }).then(res => {
                if (res.code == 200) {
                this.getUserList()
                this.$message.success('删除成功')
                } else {
                this.$notify.error({
                    title: '错误',
                    message: res.msg
                })
                }
            })
        },
        submitForm() {
            request({
                url: '/ht-datacenter/rabbit/crateRouting',
                method: 'post',
                data:this.ruleForm
            }).then(res => {
                if (res.code == 200) {
                this.$message.success('新增成功')
                this.dialogTableVisible = false
                this.getUserList()
                } else {
                this.$notify.error({
                    title: '错误',
                    message: res.msg
                })
                }
            })
        },
        handleSizeChange(v) {
          this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },
    
        // 获取用户列表
        getUserList() {
            this.dialogTableVisible = false
            this.$refs.httbRef.isShowLoading(true)
            request({
                url: '/ht-datacenter/rabbit/getRoutingKeyInfo',
                method: 'post',
                data:{
                "clusterId":this.formInline.clusterName,
                "page": this.page,
                "limit": this.size
                }
            }).then(res => {
                if (res.code == 200) {
                this.tableUserData = res.data.resultList
                this.total = res.data.count
                this.$refs.httbRef.isShowLoading(false)
                } else {
                this.$notify.error({
                    title: '错误',
                    message: res.msg
                })
                }
            })
        }
        }
  }
  </script>
  
        <style lang="scss" scoped>
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .el-form-item{
            width:50%;
          }
        }
        
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
  